<template>
    <a-row :gutter="30">
        <a-col :xs="24" :md="24">
            <a-card border="false" style="width: 100%">
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane key="1" tab="离线报警">
                        <a-table
                            :columns="columns1"
                            :row-key="(record) => record.id"
                            :data-source="data1"
                            :pagination="pagination1"
                            :loading="loading1"
                            @change="handleTableChange1"
                        ></a-table>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="设备报警" force-render>
                        <a-table
                            :columns="columns2"
                            :row-key="(record) => record.id"
                            :data-source="data2"
                            :pagination="pagination2"
                            :loading="loading2"
                        ></a-table>
                    </a-tab-pane>
                </a-tabs>
            </a-card>
        </a-col>
    </a-row>
</template>
<script>
    import { ref } from 'vue'
    import { getAlarmToday } from '@/api/alarms'
    import { getOffline } from '@/api/offline'
    import moment from 'moment' //日期处理
    const columns1 = [
        {
            title: '终端',
            dataIndex: 'posno',
            align: 'left',
        },
        {
            title: '线路',
            dataIndex: 'line',
        },
        {
            title: '未传记录',
            dataIndex: 'unum2',
            align: 'center',
        },
        {
            title: '开机时间',
            dataIndex: 'stime',
            width: 180,
            align: 'center',
        },
        {
            title: '离线时间',
            dataIndex: 'ntime',
            width: 180,
            align: 'center',
            customRender: (rec) => {
                console.log(rec.record.ndate)
                console.log(rec.text)

                return rec.record.ndate + ' ' + rec.text
            },
        },
    ]

    const columns2 = [
        {
            title: '终端',
            dataIndex: 'posno',
            align: 'left',
        },
        {
            title: '线路',
            dataIndex: 'line',
        },
        {
            title: '未传记录',
            dataIndex: 'unum2',
            align: 'center',
        },
        {
            title: '报警时间',
            dataIndex: 'datetime',
            width: 180,
            align: 'center',
            customRender: (text) => {
                console.log(text)
                console.log(text.text)
                text = moment
                    .unix(Number(text.text))
                    .format('YYYY-MM-DD HH:mm:ss')
                console.log(text)
                return text
            },
        },
        {
            title: '报警信息',
            dataIndex: 'info',
        },
    ]
    export default {
        data() {
            return {
                activeKey: ref('1'),
                data1: [],
                pagination1: {
                    showLessItems: true,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) =>
                        `显示${range[0]}-${range[1]}条，共有 ${total}条`,
                },
                query1: {
                    page: 1, //第几页
                    size: 10, //每页中显示数据的条数
                    hosName: '',
                    hosCode: '',
                    province: '',
                    city: '',
                },
                loading1: false,
                columns1,

                data2: [],
                pagination2: {
                    showLessItems: true,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) =>
                        `显示${range[0]}-${range[1]}条，共有 ${total}条`,
                },
                query2: {
                    page: 1, //第几页
                    size: 10, //每页中显示数据的条数
                    hosName: '',
                    hosCode: '',
                    province: '',
                    city: '',
                },
                loading2: false,
                columns2,
            }
        },
        methods: {
            handleTableChange1(pagination) {
                console.log('handleTableChange1:')
                console.log(pagination)
                this.pagination1.current = pagination.current
                this.pagination1.pageSize = pagination.pageSize
                this.query1.page = pagination.current
                this.query1.size = pagination.pageSize
                this.fetchOffline()
            },
            fetchOffline() {
                this.loading1 = true
                getOffline({
                    limit: this.query1.size,
                    page: this.query1.page,
                }).then(({ reply, count }) => {
                    const pg = { ...this.pagination1 }
                    pg.total = count
                    this.loading1 = false
                    this.data1 = reply
                    this.pagination1 = pg
                })
            },
            fetchAlarmToday() {
                this.loading2 = true
                getAlarmToday({
                    limit: this.query2.size,
                    page: this.query2.page,
                }).then(({ reply, count }) => {
                    const pg = { ...this.pagination2 }
                    pg.total = count
                    this.loading2 = false
                    this.data2 = reply
                    this.pagination2 = pg
                })
            },
        },
        mounted() {
            this.fetchOffline()
            this.fetchAlarmToday()
            this.$nextTick(() => {
                //  执行echarts方法
                //this.drawChart()
            })
            //this.drawChart()
        },
    }
</script>
